<template>
  <div>
      <div class="tuijianzu"  v-for="(v,i) in this.$store.state.arr" :key="i" @click="quxiangqing">
      <div class="box1">
          <div class="box1_1"><h3>{{v.title}}</h3></div>
          <div class="box1_2">
              <span class="loljs">{{v.lol}}</span>&nbsp;&nbsp;&nbsp;&nbsp;{{v.guanfang}}
          </div>
      </div>
      <div class="box2"><div class="box2c"><img :src="v.imgurl" alt=""></div></div>
  </div>
  </div>
</template>

<script>
export default {
    methods:{
quxiangqing(){
    this.$router.push('/xiangqing')
}
    },
created(){
       this.$store.dispatch("heisha",{url:"/xiaobai/xiaohei"})
}
}
</script>

<style scoped>
.tuijianzu{
    width: 100%;
    height: 1.2rem;
    /* background-color: brown; */
    display: flex;
    justify-content: space-between;
}
.box1{
    width: 70%;
    /* background-color: aqua; */
}
.box2{
    width: 30%;
/* background-color: chartreuse; */
}
.box1_1{
width: 100%;
height: 75%;
/* background-color: blanchedalmond; */
font-size: 0.16rem;
}
.box1_1>p{
    line-height: 0.3rem;
}
.box1_1>h3{
    margin-left: 00.2rem;
    font-weight: 600;
    margin-top: 00.1rem;
}
.box1_2{
width: 100%;
height: 25%;
line-height: 0.1rem;
}
.loljs{
color: #70b0b0;
background-color: #e8f7f0;
    margin-left: 0.3rem;
}
.box2c{
    width: 100%;
    height: 75%;
    /* background-color: chartreuse; */
}
.box2c>img{
    width: 100%;
    height: 100%;
    border-radius: 0.1rem;
}

</style>